<template>
  <el-card class="user-home-card">
    <!-- 头部：头像 + 基础信息 -->
    <div class="user-header">
      <el-avatar
        :src="user.avatar || defaultAvatar"
        size="large"
        shape="circle"
        class="user-avatar"
      />
      <div class="user-basic-info">
        <h2 class="nickname">{{ user.nickname || user.username }}</h2>
        <el-tag type="info" v-if="user.role === 2">管理员</el-tag>
        <el-tag type="success" v-if="user.role === 1">作者</el-tag>
        <el-tag v-else>普通用户</el-tag>
        <p class="bio">{{ user.bio || "这个人很懒，还没写简介~" }}</p>
      </div>
    </div>

    <!-- 主体：详细信息 -->
    <el-divider />
    <el-descriptions :column="2" border class="user-details">
      <el-descriptions-item label="用户名">{{
        user.username
      }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{
        user.phone || "未绑定"
      }}</el-descriptions-item>
      <el-descriptions-item label="个人网站">
        <a :href="user.website" target="_blank" v-if="user.website">查看链接</a>
        <span v-else>未填写</span>
      </el-descriptions-item>
      <el-descriptions-item label="注册时间">{{
        formatTime(user.created_at)
      }}</el-descriptions-item>
      <el-descriptions-item label="最后登录">{{
        formatTime(user.last_login) || "未登录过"
      }}</el-descriptions-item>
      <el-descriptions-item label="发布博客数">{{
        user.blog_number
      }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script>
import dayjs from "dayjs";
import { getUserInfo } from "../../api";

export default {
  data() {
    return {
      defaultAvatar:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", // 默认头像
      user: {},
    };
  },
  methods: {
    formatTime(time) {
      return time ? dayjs(time).format("YYYY-MM-DD HH:mm") : "-";
    },
  },
  async created() {
    // 获取用户信息
    const res = await getUserInfo(this.$store.state.user.id);
    if (res.data.status === 0) {
      this.user = res.data.user;
    }
  },
};
</script>

<style scoped>
.user-home-card {
  max-width: 1200px;
  margin: 20px auto;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.user-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 25px;
}

.user-avatar {
  width: 120px;
  height: 120px;
  border: 2px solid #f0f2f5;
}

.user-basic-info {
  flex: 1;
}

.nickname {
  font-size: 24px;
  margin: 0 0 15px 0;
  color: #303133;
}

.bio {
  color: #606266;
  font-size: 14px;
  line-height: 1.8;
  margin: 15px 0 0 0;
}

.user-details {
  margin-top: 20px;
  font-size: 14px;
}
</style>
